<template>
  <div>
      <!-- 顶部评价栏 -->
     <div style="background:#eae9e5;padding:5vw 0 15px 10px;position:fixed;top:0;width:100%;z-index:999;">
          <span style="width:20px;height:20px;display:inline-block; color:#cdbcab;">
              <van-icon @click="toBack" name="arrow-left"/>
          </span>
          <span style="width:80%;height:20px;display:inline-block;text-align: center;margin-right:1vw;">
               评价
          </span>
          <van-icon name="cart-o" />
      </div>
      <!-- 顶部评价过滤动作栏 -->
      <div  id="comentCoul">
          <span @click="options(index)" :class=" oindex == index ? 'optionC':''" v-for="(item,index) in selectOpt" :key="index" id="funcSpan">
             {{item}}
          </span>
          
      </div>
       <!-- 评价详情 -->
       <div  style="padding:5px;margin-top:130px">
           <div style="border:1px solid #ccc;border-radius:5px;margin:10px auto;width:90%;padding:5px">
                <div style="display:flex">
                  <div>
                    <img src="https://img2.baidu.com/it/u=4289343170,1145786918&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" width="30" height="30" style="border-radius:50%;" />
                  </div>
                  <div>
                   <span style="margin-left:10px;">OMINI.BASS</span><br/>
                   <span style="margin-left:10px;color:#ccc;font-size:0.7rem">2019-7-2</span>
                 </div>
                </div>
                <div style="padding:5px">
                    <div style="padding-bottom:5px">
                      <span style="font-size:0.9em">上身效果:穿着舒服,也很修身厚薄度:适中尺码推荐:自己选的,很合适材质特性:很喜欢这种材质面料品质:满意,特地穿了之后才来评价。面料做工都挺好,柔软且质量好</span>
                    </div>
                    <div>
                      <img :src="item" style="width:5rem;height:5rem;border-radius:5%;margin-right:0.9em" v-for="item in imgCompent.imgC" :key="item"/>
                    </div>
                </div>
              
           </div>
        </div>
         <div  style="padding:5px">
           <div style="border:1px solid #ccc;border-radius:5px;margin:10px auto;width:90%;padding:5px">
                <div style="display:flex">
                  <div>
                    <img src="https://img2.baidu.com/it/u=4289343170,1145786918&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" width="30" height="30" style="border-radius:50%;" />
                  </div>
                  <div>
                   <span style="margin-left:10px;">OMINI.BASS</span><br/>
                   <span style="margin-left:10px;color:#ccc;font-size:0.7rem">2019-7-2</span>
                 </div>
                </div>
                <div style="padding:5px">
                    <div style="padding-bottom:5px">
                      <span style="font-size:0.9em">质量非常好,与卖家描述的完全一致,非常满意,真的很喜欢,完全超出期望值,发货速度非常快,包装非常仔细、严实,物流公司服务态度很好,运送速度很快,店铺老板服务也十分贴心,有任何不懂得方面都会耐心的讲解,很满意的一次购物</span>
                    </div>
                    <div>
                      <img :src="item" style="width:5rem;height:5rem;border-radius:5%;margin-right:0.9em" v-for="item in imgCompent1.imgC1" :key="item"/>
                    </div>
                </div>
              
           </div>
           <div  style="padding:5px">
           <div style="border:1px solid #ccc;border-radius:5px;margin:10px auto;width:90%;padding:5px">
                <div style="display:flex">
                  <div>
                    <img src="https://img0.baidu.com/it/u=3522149087,1448489500&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666026000&t=1235cd2e4a4468081cbdc1fc610e6eaa" width="30" height="30" style="border-radius:50%;" />
                  </div>
                  <div>
                   <span style="margin-left:10px;">OMINI.BASS</span><br/>
                   <span style="margin-left:10px;color:#ccc;font-size:0.7rem">2019-7-2</span>
                 </div>
                </div>
                <div style="padding:5px">
                    <div style="padding-bottom:5px">
                      <span style="font-size:0.9em">一次愉快的购物,与卖家描述的完全一致,非常满意,真的很喜欢,完全超出期望值,发货速度非常快,包装非常仔细、严实,物流公司服务态度很好,运送速度很快,店铺老板服务也十分贴心,有任何不懂得方面都会耐心的讲解,很满意的一次购物</span>
                    </div>
                    <div>
                      <img :src="item" style="width:5rem;height:5rem;border-radius:5%;margin-right:0.9em" v-for="item in imgCompent2.imgC2" :key="item"/>
                    </div>
                </div>
              
           </div>
           <div style="padding:3rem 5px 11rem;text-align: center;">
            <span style="color:#ac7625">小主,没有更多了哦~~~</span>
           </div>
        </div>
        <!-- 动作栏 -->
       <div style="border:6px solid #ccc;padding:5px 3px 5px 5px;position:fixed;bottom:0;width:100%;height:30px;z-index:999;">
          <van-action-bar>
            <van-action-bar-icon icon="shop-o" text="店铺" />
            <van-action-bar-icon icon="chat-o" text="客服"  />
           <van-action-bar-icon icon="star-o" text="收藏"  color="#000"/>
            <van-action-bar-button style="width:5px;height:30px;background:#f0d5b8;" type="warning" text="加入购物车" />
            <van-action-bar-button style="width:5px;height:30px;background:#c1ab96;"  type="danger" text="立即购买" />
          </van-action-bar>
       </div>
  </div>
  </div>
</template>

<script setup lang="ts">
import { reactive,ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import {getProductDetil} from "@/api/getCateList"

   //评价筛选
    let selectOpt = reactive(['全部','最新','好评(233)','中评(0)','差评(0)','有图(12)'])
    let oindex = ref(0)
    let options = (index:number)=>{
      oindex.value = index
       
    }
       //评价图片
       let toBack = ()=>{
          window.history.go(-1)
       }
    let  imgCompent = reactive({imgC:[]})
    let  imgCompent1 = reactive({imgC1:[]})
    let  imgCompent2 = reactive({imgC2:[]})
     onMounted(()=>{
          getProductDetil()
             .then(res=>{
               imgCompent.imgC = res.data[5].img
               imgCompent1.imgC1 = res.data[3].img
               imgCompent2.imgC2 = res.data[2].img
             })
     })
</script>
      
<style scoped>
  .optionC{
      color:#fff;
      background: #cdbcab;
  }
  #comentCoul{
      background:#fff;
      padding:3% 5vw 3% 5px ;
      position:fixed;
      top:15vw;
      font-size:12px;
      border-bottom:1px solid #ccc;
      width:99%;z-index:999;display:flex;
      flex-wrap: wrap; 
  }
  #funcSpan{
      padding:5px 8px;
      margin: 2px 10px;
      display:inline-block;border:1px solid #eae9e5;border-radius:20px;margin-bottom:10px;
  }
</style>